
<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" charset="utf-8" />
  <link rel=stylesheet href="assets/js/jquerymobile/jquery.mobile-1.4.2.css" />
  <link rel=stylesheet href="assets/css/index.css" />
  <link rel=stylesheet href="assets/css/font.css" />
</head> 

<body>
  <audio preload="auto" id="son">
      <source src="assets/mp3//chat.mp3" type="audio/mp3">
  </audio>
  
  <div data-role="page" id="map-page" data-url="map-page" display="none">
      <div data-role="header" id="header">
    	<img src="assets/img/logo.jpeg" alt="logo"/>
        <h1>Horny Bee</h1>
        <span class="home" onclick="clickRecherche()"><i class="icon-home"></i></span>
    </div>
    <div class="wrapper">
        <div id="menu">
            <button id="button" class="search-btn" onclick="clickCritere()" data-icon="search">Recherche</button>
            <button id="button" class="search-btn" onclick="clickMap()" data-icon="search">J'ai de la chatte ?</button>
        </div>
        <div id="recherche">
            <div class="block-wrapper">
              <div data-role="rangeslider">
                <label class="labels" for="range-1a">Age :</label>
                <input type="range" name="range-1a" id="age1" min="18" max="90" value="18">
                <label class="labels" for="range-1b">Age :</label>
                <input type="range" name="range-1b" id="age2" min="18" max="90" value="90">
              </div>
            </div>
          <form>
          <fieldset data-role="controlgroup">
            <div class="block-wrapper">
                <legend class="labels">Sexe :</legend>
                <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" checked="" value="femme" class="woman">
                <label for="checkbox-v-2a" class="woman" >Femme</label>
                <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" value="homme" class="man">
                <label for="checkbox-v-2b" class="man">Homme</label>
                <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" value="both">
                <label for="checkbox-v-2c">Entre les deux</label>
            </div>
          </fieldset>
          </form>
            <div class="block-wrapper">
                <label for="select-choice-1" class="labels">Mensuration minimum:</label>
                <select name="select-choice-1" id="mensuration">
                    <option id="mensuration_bonneta" value="">All</option>
                    <option id="mensuration_bonneta" value="A">A</option>
                    <option id="mensuration_bonnetb" value="B">B</option>
                    <option id="mensuration_bonnetc" value="C">C</option>
                    <option id="mensuration_bonnetd" value="D">D</option>
                    <option id="mensuration_bonnete" value="E">E</option>
                    <option id="mensuration_bonnetf" value="F">F</option>
                </select>
                <input type="range" id="mensuration_taille" min="80" max="120" value="90" step="5"/>
            </div>
        <div class="block-wrapper">
            <span class="labels"> Rayon d'action (km) : </span> 
            <input type="number" id="rayon_action" value="20" max="100"/>
        </div>
        <div class="block-wrapper">
            <label for="select-choice-1" class="labels">Couleur de cheveux :</label>
            <select name="select-choice-1" id="cheveux">
                <option id="cheveux_all" value="">All</option>
                <option id="cheveux_bl" value="Blonde">Blonde</option>
                <option id="cheveux_ro" value="Rousse">Rousse</option>
                <option id="cheveux_br" value="Brune">Brune</option>
                <option id="cheveux_chauve" value="Chauve">Chauve</option>
                <option id="cheveux_chatain" value="Chatain">Chatain</option>
                <option id="cheveux_no" value="Noir">Noir</option>
            </select>
        </div>
        <div class="block-wrapper">
            <fieldset data-role="controlcapote">
                <div data-role="fieldcontain">
                <label for="slider2" class="labels">Capote :</label>
                <select name="slider" id="slider" data-role="slider">
                    <option value="0" id="avec_capote">Sans</option>
                    <option value="1" id="sans_capote">Avec</option>
                </select>
                </div>
            </fieldset>
        </div>
        <div class="block-wrapper">
          <div data-role="rangeslider">
            <label for="range-1a" class="labels">Poids :</label>
            <input type="range" name="range-1a" id="poid1" min="20" max="200" value="40">
            <label for="range-1b" class="labels">Poids :</label>
            <input type="range" name="range-1b" id="poid2" min="20" max="200" value="100">
          </div>
        </div>
        <div class="block-wrapper">
          <div data-role="rangeslider">
            <label for="range-1a" class="labels">Taille :</label>
            <input type="range" name="range-1a" id="taille1" min="100" max="220" value="140">
            <label for="range-1b" class="labels">Taille:</label>
            <input type="range" name="range-1b" id="taille2" min="100" max="220" value="200">
          </div>
        </div>
        <button id="button" class="search-btn" onclick="clickFind()" data-icon="search">Recherche</button>
    </div>
    <div data-theme="a" display="none" id="new_search">
      <button id="button" onclick="clickRecherche()" data-icon="search">Nouvelle recherche</button>
      <h1 onclick="clickRecherche()"></h1>
    </div>
    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    </div>

  </div>
  <script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
  <script src="assets/js/jquerymobile/jquery.mobile-1.4.2.min.js"></script>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  <script src="assets/js/navigation.js"></script>
</body>
</html>